<template>
  <el-dialog :visible="show" title="文件上传" width="600px" @close="close">
    <div class="uploadFile">
      <el-upload
          id="upload"
          ref="upload"
          :auto-upload="false"
          :http-request="handleFileUpload"
          action="#"
          class="upload-demo"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!--        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </el-upload>
    </div>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">上传</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import {uploadFile} from "@/api/resource";

export default {
  name: "uploadFile",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'default' // default-backups  resource-resource
    }
  },
  data: {
    id: null
  },
  mounted() {
    // document.getElementById('upload')[0].webkitdirectory = true;
  },
  methods: {
    close() {
      this.$emit('chose')
    },
    confirm() {
      this.$emit('confirm')
      this.$refs.upload.submit()
    },
    async handleFileUpload(e) {
      try {
        let formData = new FormData()
        formData.append('file', e.file)
        console.log(this.type === 'resource')
        let res
        if (this.type === 'resource') {
          res = await request({
            url: 'http://localhost:8080/resource/uploadFile',
            method: "post",
            data: formData,
            params: {
              pId: this.id
            }
          })
        } else {
          res = await request({
            url: 'http://localhost:8080/file/uploadFile',
            method: "post",
            data: formData,
            params: {
              pId: this.id
            }
          })
        }
        if (res.code === 200) {
          console.log('上传成功', res)
          this.$message.success(res.msg)
        }
      } catch (e) {

      }
    }
  }
}
</script>

<style long="scss" scoped>
.uploadFile {
  display: flex;
  justify-content: center;
}
</style>
